<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px" @click="clickCnt++">关键字</span>
      <el-input placeholder="请输入关键字" v-model="incomeReq.keyword" style="width: 200px; margin-left: 10px"
        clearable></el-input>
      <el-button type="text" style="margin-left: 20px" size="small" @click="getIncomes()">
        搜索
      </el-button>
      <el-button type="text" style="margin-left: 20px" size="small" @click="calculateCaseIncomes()">
        统计案件应付
      </el-button>
      <el-button type="text" style="margin-left: 20px" size="small" @click="addIncomeVis = true">
        添加
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table height="calc(100% - 40px)" :data="incomeRes" stripe border highlight-current-row show-summary>
          <el-table-column type="index" width="60"></el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.sured">待确认</el-tag>
              <el-tag type="success" v-if="scope.row.sured">已确认</el-tag>
              <el-tag type="danger" v-if="scope.row.marked">已标志</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="所属">
            <template slot-scope="scope">
              <el-link @click="
                empId = scope.row.empId
              editEmplayeeRateVis = true
                " style="color: blue">
                {{ scope.row.name }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="联系电话">
            <template slot-scope="scope">
              {{ scope.row.phone }}
            </template>
          </el-table-column>
          <el-table-column label="应付金额" prop="sum">
            <template slot-scope="scope">{{ scope.row.sum }}元</template>
          </el-table-column>
          <el-table-column label="应付明细" type="expand" width="120px">
            <template slot-scope="scope">
              <div v-for="item in scope.row.incomes" :key="item.CI_ID" style="margin: 5px">
                <span style="margin-left: 20px; font-size: 14px">
                  【{{ item.CI_Name }}】{{ item.USR_Name }}
                </span>
                <span style="margin-left: 20px; font-size: 14px">
                  金额:{{ item.CI_Fee }}元
                </span>
                <span style="margin-left: 20px; color: #888">
                  {{ item.CI_Expression }}
                </span>
                <span style="margin-left: 20px; color: #888">
                  表达式:{{ item.CI_ExpressionDesc }}
                </span>
                <span style="margin-left: 20px; color: #888" v-if="item.CI_Remark">
                  备注:{{ item.CI_Remark }}
                </span>
                <el-button type="text" size="small" icon="el-icon-edit" @click="
                  curIncome = item
                editIncomeVis = true
                  ">
                  修改
                </el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="deleteIncome(item.CI_ID)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-drawer title="新增应付款" :visible.sync="addIncomeVis" direction="rtl">
      <addCaseIncome :caseId="caseId" @success="
        getIncomes()
      addIncomeVis = false
        " />
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editIncomeVis" direction="rtl">
      <editCaseIncome v-if="curIncome" :caseId="caseId" :curIncome="curIncome" @success="
        getIncomes()
      editIncomeVis = false
        " />
    </el-drawer>

    <el-dialog title="提成率修改" :visible.sync="editEmplayeeRateVis" width="400px" :modal-append-to-body="false" center>
      <editEmplayeeRate :empId="empId" @saved="editEmplayeeRateVis = false" @canceled="editEmplayeeRateVis = false" />
    </el-dialog>

    <el-button @click="incomeSure" round type="warning" v-if="caseInfo && !caseInfo.CS_IncomeSured" style="
        position: fixed;
        right: 50px;
        bottom: 120px;
        width: 120px;
        height: 60px;
        font-size: 16px;
        z-index: 100;
      ">
      应付款确认
    </el-button>

    <el-button @click="incomeUnsure" round type="danger" v-if="caseInfo && clickCnt >= 10" style="
        position: fixed;
        right: 50px;
        bottom: 120px;
        width: 120px;
        height: 60px;
        font-size: 16px;
        z-index: 100;
      ">
      应付款反确认
    </el-button>

    <el-button @click="incomeMark" round type="danger" v-if="caseInfo && !caseInfo.CS_IncomeMark" style="
        position: fixed;
        right: 200px;
        bottom: 120px;
        width: 120px;
        height: 60px;
        font-size: 16px;
        z-index: 100;
      ">
      标志
    </el-button>
  </div>
</template>
<script>
import {
  getIncomes,
  addIncome,
  editIncome,
  deleteIncome,
  calculateCaseIncomes,
  incomeSure,
  incomeUnsure,
  incomeMark,
} from '@/api/core/caseIncome'
import addCaseIncome from '@/views/web/case/components/caseIncome/addCaseIncome.vue'
import editCaseIncome from '@/views/web/case/components/caseIncome/editCaseIncome.vue'
import editEmplayeeRate from '@/views/web/orgnization/components/editEmplayeeRate.vue'
export default {
  components: { editEmplayeeRate, addCaseIncome, editCaseIncome },
  props: ['caseId', 'caseInfo'],
  data: function () {
    return {
      clickCnt: 0,
      empId: null,
      incomeReq: {
        caseId: null,
        keyword: '',
      },
      incomeRes: [],
      newIncome: {},
      curIncome: null,
      addIncomeVis: false,
      editIncomeVis: false,
      editEmplayeeRateVis: false,
    }
  },
  methods: {
    getIncomes() {
      this.incomeReq.caseId = this.caseId
      getIncomes(this.incomeReq).then(({ data }) => {
        this.incomeRes = data
      })
    },
    addIncome() {
      this.newIncome.CI_CaseID = this.caseId
      addIncome(this.newIncome).then(() => {
        this.getIncomes()
        this.addIncomeVis = false
      })
    },
    editIncome() {
      editIncome(this.curIncome).then(() => {
        this.getIncomes()
        this.editIncomeVis = false
      })
    },
    deleteIncome(id) {
      this.$confirm(`是否删除该提成`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteIncome(id).then(() => {
          this.getIncomes()
        })
      })
    },
    incomeSure() {
      this.$confirm(
        `确认后，后续将无法修改应付款数据，包括案件贡献率，是否确认？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        incomeSure(this.caseInfo.CS_ID).then(() => {
          this.getIncomes()
        })
      })
    },
    incomeUnsure() {
      this.$confirm(`是否反确认？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        incomeUnsure(this.caseInfo.CS_ID).then(() => {
          this.getIncomes()
        })
      })
    },
    incomeMark() {
      this.$confirm(`是否标志？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        incomeMark(this.caseInfo.CS_ID).then(() => {
          this.getIncomes()
        })
      })
    },
    calculateCaseIncomes() {
      if (this.incomeRes.length > 0) {
        this.$confirm(
          `是否重新统计案件应付？（注意：已有案件应付数据将会删除后重新统计）`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          calculateCaseIncomes(this.caseId).then(() => {
            this.getIncomes()
            this.$message('操作成功')
          })
        })
      } else {
        calculateCaseIncomes(this.caseId).then(() => {
          this.getIncomes()
          this.$message('操作成功')
        })
      }
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getIncomes()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.row {
  height: 100%;
}

.col {
  height: 100%;
}

.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}

.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
